<template>
    <div>
        <div class="file_upload">
            <span>文件上传</span>
            <el-upload
                    style="margin-top: 5px"
                    class="upload-demo"
                    ref="fileUpload"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :on-preview="fileHandlePreview"
                    :on-remove="fileHandleRemove"
                    :on-error="fileError"
                    :limit="1"
                    :before-upload="fileBeforeUpload"
                    :file-list="fileList"
                    :auto-upload="false">
                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                <el-button style="margin-left: 10px;" size="small" type="success" @click="fileSubmitUpload">上传到服务器
                </el-button>
                <div slot="tip" class="el-upload__tip">只能上传xls/xlsx文件，且不超过500kb</div>
            </el-upload>
        </div>

        <div class="img_upload">
            <span>图片上传</span>
            <el-upload
                    ref="imgUpload"
                    class="upload-demo"
                    drag
                    :headers="headers"
                    action="/Operator/img"
                    :on-preview="handlePictureCardPreview"
                    :on-error="ImgError"
                    :on-success="imgSuccess"
                    :limit="1"
            >
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
            <img :src="imgSrc" alt="">
        </div>
    </div>
</template>

<script>
export default {
    name: "upload",
    data() {
        return {
            fileList: [],
            imgList: [],
            imgSrc: "",
            headers: {
                Authorization: window.sessionStorage.getItem("token"),
            },
        }
    },
    methods: {
        fileHandlePreview() {

        },
        fileHandleRemove(file, fileList) {
            console.log(file, fileList);
        },
        fileSubmitUpload(file) {
            this.$refs.fileUpload.submit();
        },
        fileError(err, file, fileList) {
            if (JSON.parse(err.message).data.length > 0) {
                this.$emit("getErrorData", JSON.parse(err.message).data);
            } else {
                this.$notify({
                    title: "上传文件有误",
                    type: "error",
                    message: "导入数据时出错,请检查数据是否正确",
                });
            }
        },
        fileBeforeUpload(file) {
            let fileExt = file.name.replace(/.+\./, "");
            if (["xls", "xlsx"].indexOf(fileExt.toLowerCase()) === -1) {
                this.$notify({
                    title: "文件上传有误",
                    type: "error",
                    message: "请上传正确的Excel文件",
                });
                return false;
            }
        },
        handlePictureCardPreview(file) {
            console.log(file)
            console.log(file.url)
            this.imgSrc = file.url;
        },
        ImgError(error, file, fileList) {
            console.log(fileList)
        },
        imgSuccess(response, file, fileList) {
            // 实现预览的方式
            this.imgSrc = URL.createObjectURL(file.raw);
            this.$refs.imgUpload.clearFiles();
        },
    },
}
</script>

<style scoped>
.file_upload {
    margin-bottom: 20px;
}
</style>